<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">

  <title>Effeckt.css</title>

  <meta name="description" content="UI-Less & Performant Transitions & Animations">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

  <link rel="stylesheet" href="{{assets}}/css/demo/demo.css">

  <!-- Individual module CSS files here -->
  <!-- Should we combine or not combine? -->
  <link rel="stylesheet" href="{{assets}}/css/effeckt.css">
</head>

<body>

  <div class="warning">Work in Progress! Not quite ready for prime-time</div>

  {{> off-screen-nav}}

  {{> page-transition}}

  {{> modal}}

  <div data-effeckt-page="page-1">

    <div class="page-wrap no-transitions" id="page-wrap">

      <h1>
        <a href="./">
          <span>E</span>
          <span>f</span>
          <span>f</span>
          <span>e</span>
          <span>c</span>
          <span>k</span>
          <span>t</span>
          <br class="mobile-break">
          <span>.</span>
          <span>c</span>
          <span>s</span>
          <span>s</span>
        </a>
      </h1>
      <subhead>
        Performant CSS transitions & animations
        <a href="https://github.com/h5bp/Effeckt.css">on GitHub</a>
      </subhead>


      {{>body}}


      <div class="effeckt contributors readme">

        <header>
          <h2>About</h2>
        </header>

        <p>Ever notice how small flourishes and subtle transitions dramatically increases the value of the experience you enjoy with an app or site?

        <p>Designing and developing UIs for the mobile web is tricky, but it's extremely difficult to do that while delivering something that performs at 60fps. The best opportunities to getting jank-free transitions on phones/tablets are CSS transition and keyframe animation based, especially tapping into hardware-accelerated transforms and opacity changes.

        <p>This library has a few <strong>goals</strong>:</p>

        <ol>
          <li>It provides very little UI of its own. It's only hooks for transitions/animations.</li>
          <li>Designer-curated set of classy and reasonable effects. (no <a href="http://easings.net/#easeInBounce"><code>easeInBounce</code></a>)</li>
          <li>Establish browser support guidelines (e.g. Android 2.3 would gracefully degrade)</li>
          <li>CSS performance regression testing (a la <a href="http://bench.topcoat.io">bench.topcoat.io</a>)</li>
          <li>Deliver jank-free <em>60fps</em> performance on target browsers/devices</li>
          <li>If a particular effect cannot deliver target performance (hey <code>blur()</code> CSS filter), it cannot be included.</li>
          <li>Guidelines on what to avoid when styling these affected elements (avoid expensive CSS)</li>
          <li>Deliver a builder so users can pull only the CSS they need.</li>
          <li>There is no hover on the mobile web, so any hover-based effects would be excluded or have a tap equivalent.</li>
        </ol>

        <div class="fluid-video">
          <iframe width="640" height="480" src="//www.youtube.com/embed/Qc40YDFA4Bg" frameborder="0" allowfullscreen></iframe>
        </div>

        <header>
          <h2>Contributors</h2>
        </header>

        <ul id="contributors-list" class="contributors-list"></ul>

      </div>


      {{> off-screen-nav-cover}}

    </div><!-- div.page-wrap -->
  </div>

  <div data-effeckt-page="page-2">
    <div class="page-wrap" id="page-2">
      <h2>Page Transition From Left</h2>

      <p>This is another page.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro nulla unde doloremque consequuntur illum quo dolor. Tenetur, voluptate temporibus fuga labore atque illum quas vel dignissimos impedit vitae corporis itaque!<p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, sunt tempora perspiciatis officia laudantium voluptas dicta! Nesciunt, magnam nostrum velit iste beatae totam voluptatibus sint quas amet modi architecto labore.</p>
      <button class="effeckt-page-transition-button" data-effeckt-transition-in="slide-from-right"  data-effeckt-transition-out="slide-to-left" data-effeckt-transition-page="page-1">Slide From Right</button>
    </div>
  </div>

  <div data-effeckt-page="page-3">
    <div class="page-wrap" id="page-3">
      <h2>Page Transition From Right</h2>

      <p>This is another page.</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, accusamus, aliquam error excepturi asperiores ipsum nobis molestias neque molestiae illum magnam mollitia nulla temporibus aliquid esse rem amet cumque facilis.</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, temporibus, ducimus architecto quidem voluptatem sint maiores atque deserunt sed aspernatur eveniet vel perferendis corrupti impedit aut voluptates neque similique enim.</p>
      <button class="effeckt-page-transition-button" data-effeckt-transition-in="slide-from-left" data-effeckt-transition-out="slide-to-right" data-effeckt-transition-page="page-1">Slide From Left</button>
    </div>
  </div>

  <div data-effeckt-page="page-4">
    <div class="page-wrap" id="page-4">
      <h2>Page Transition From Bottom</h2>

      <p>This is another page.</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, accusamus, aliquam error excepturi asperiores ipsum nobis molestias neque molestiae illum magnam mollitia nulla temporibus aliquid esse rem amet cumque facilis.</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, temporibus, ducimus architecto quidem voluptatem sint maiores atque deserunt sed aspernatur eveniet vel perferendis corrupti impedit aut voluptates neque similique enim.</p>
      <button class="effeckt-page-transition-button" data-effeckt-transition-in="slide-from-top" data-effeckt-transition-out="slide-to-bottom" data-effeckt-transition-page="page-1">Slide From Top</button>
    </div>
  </div>

  <div data-effeckt-page="page-5">
    <div class="page-wrap" id="page-5">
      <h2>Page Transition From Top</h2>

      <p>This is another page.</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, accusamus, aliquam error excepturi asperiores ipsum nobis molestias neque molestiae illum magnam mollitia nulla temporibus aliquid esse rem amet cumque facilis.</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, temporibus, ducimus architecto quidem voluptatem sint maiores atque deserunt sed aspernatur eveniet vel perferendis corrupti impedit aut voluptates neque similique enim.</p>
      <button class="effeckt-page-transition-button" data-effeckt-transition-in="slide-from-bottom" data-effeckt-transition-out="slide-to-top" data-effeckt-transition-page="page-1">Slide From Bottom</button>
    </div>
  </div>

  <!-- Libs -->
  <script src="{{assets}}/js/libs/jquery.min.js"></script>
  <script src="{{assets}}/js/libs/modernizr.js"></script>

  <!-- Individual module JS files here -->
  <!-- Should we combine or not combine? -->
  <!-- Should we provide minified versions? -->
  <script src="{{assets}}/js/core.js"></script>
  <script src="{{assets}}/js/modules/modal.js"></script>
  <script src="{{assets}}/js/modules/buttons.js"></script>
  <script src="{{assets}}/js/modules/list-items.js"></script>
  <script src="{{assets}}/js/modules/off-screen-nav.js"></script>
  <script src="{{assets}}/js/modules/page-transitions.js"></script>
  <script src="{{assets}}/js/modules/list-scroll.js"></script>
  <script src="{{assets}}/js/modules/tabs.js"></script>
  <script src="{{assets}}/js/modules/positional-modals.js"></script>
  <script src="{{assets}}/js/modules/captions.js"></script>

  <!-- Demo JS -->
  <script src="{{assets}}/js/demo/demo.js"></script>

</body>

</html>
